<template>
	<view :class="currentTheme">
		<a-nabbar :name="option.label" />
		<mescroll-body  @init="mescrollInit"  @down="downCallback"  @up="upCallback">
			<view class="u-text-center u-font-26 content-desc-item u-padding-top-24 u-padding-bottom-24">
				<text>已上传剧本</text>
				<text class="text-color-txtTheme u-margin-left-40">{{totalElements}}</text>
				<text>本</text>
			</view>
			<view class=" u-padding-left-32 u-padding-right-32">
				<view  v-for="(item,index) in dataList" :key="index" class="u-margin-bottom-20">
					<list-item :item="item" collectionType="collection"
          height="277"
          width="171"
					:showHotelAddress="false"
					:showDelete="loginForm.clerkRole!=='DM'" 
					:isShare="false" @remove="getRemove"  @edit="edit"  :showFooterRight="loginForm.userType=='issue'?true:false"
					:showEdit="isEdit" :showTime="false">
						<view class="u-padding-20"  slot="footer-start"  v-if="['城限','独家'].includes(item.issueModeName)&&isEdit">
							<item-btn width="100%" @click="editItem(item)">{{item.issueModeName}}编辑</item-btn>
						</view>
					</list-item>
				</view>
			</view>
		</mescroll-body>
		<fixed-team btnText="新增剧本" @btnClick="addLarp"  v-if="loginForm.clerkRole!=='DM'"></fixed-team>
	</view>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import {deleteIds} from '@/api/crud.js'
	import searchMixins from '@/mixins/searchMixins.js'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	export default {
		mixins:[upCallback,searchMixins],
		components: {
			itemSearch
		},
		data() {
			return {	
				apiModule:'shopApi',
				form:{
					types: 'script'
				},
				option:{
					name:''
				}
			}
		},
		onLoad(option) {
			//this.valiDateMixin('issue')
			option.label = option.label || '剧本管理'
			this.option = option;
			if(!this.isEdit) this.form.storeId = this.loginForm.storeId
		},
		computed: {
			isEdit() { //是否具有编辑权限
				return this.loginForm.userType=='issue'
			},
			apiType(){
				return this.isEdit ? 'product' : 'systemStoreProduct'
			},
			name(){
				return this.isEdit ? '' : 'findPageByCon'
			},
			
		},
		methods: {
			addLarp() {
				this.$u.route({
					url:this.loginForm.userType==='issue' ? '/pages/addLarp/addLarp' : '/pagesA/storeAddLarp/storeAddLarp'
				})
			},
			getRemove(id){
				const index = this.dataList.findIndex(val=>val.id==id);
				if(index>-1){
					deleteIds({},this.apiType,this.apiModule,id).then(res=>{
						this.$u.toast('删除成功')
						this.dataList.splice(index,1); //删除某项
						--this.totalElements
					})
				}
			},
			editItem(item){
				this.$u.route({
					url:'/pages/addLarp/addCity',
					params:{
						istemp:"0",
						productId:item.id,
						issueMode:item.issueMode,
						issueModeName:item.issueModeName
					}
				})
			},
			//编辑剧本
			edit(id){
				this.$u.route({
					url:'/pages/addLarp/addLarp',
					params:{productId:id}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.addlarp-btn-box{
		padding: 0 283rpx;
	}
	.page-title{
		&::after{
			content: '';
			display: block;
			height: 4rpx;
			width: 320rpx;
			margin: 27rpx auto;
			background-color: $primary;
		}
	}
</style>
